<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="stylesheet" href="css/classes_circle_addresslist.css">
	<link rel="stylesheet" href="css/main.css">
	<title>通讯录</title>

	<style>
		.row {
			margin: 5px auto 0;
			display: flex;
			padding: 5px;
			width: 320px;
		}

		.row>div:first-child {
			text-align: right;
			flex: 2;
		}

		.row>div:last-child {
			padding-left: 10px;
			flex: 3;
		}

		input {
			background: none;
			padding-left: 5px;
			border: none;
			border-bottom: solid thin;
			font-size: 15px;
			width: 100px;
		}

		.save {
			margin-top: 10px;
			text-align: center;
		}

		.save>button {
			padding: 5px 10px;
			color: white;
			background-color: royalblue;
			border: none;
			border-radius: 3px;
		}

		.unread {
			display: inline-block;
			width: 5px;
			height: 5px;
			border-radius: 50%;
			background: #e02d30;
			position: relative;
			left: 0;
			top: -10px;
		}

		.tip {
			font-size: 10px;
			color: grey;
			padding: 5px 0;
			text-align: center;
		}
		.header-after {
			 margin-top: 40.5px;
		 }
	</style>

</head>

<body>
	<div id="container">
		<div class="contain">
			<div class="header">
				<div class="header_title">通讯录</div>
				<img src="image/return.png" alt="" class="return" onclick="history.back()">
			</div>
			<div id="vue-root">
				<div class="circle_list header-after">
					<ul>
						<li class="circle_li1" v-for="classes in classess">
							<a class="circle_title"><span v-text="classes.name"></span>
								<div class="unread" v-if="anyUnread(classes.students)"></div>
								<img :src="down(classes.open)" class="circle_img" @click="classes.open=!classes.open">
							</a>
							<ul v-if="classes.open">
								<li class="circle_li" v-for="student in classes.students" style="position: relative;">
									<span v-text="student.name"></span>
									<span v-text="['','爸爸','妈妈','家长'][student.type]"></span>
									<div class="unread" v-if="student.unread"></div>
									<img v-if="student.studentId" src="image/message.svg" class="circle_img"
										@click="chat(student.studentId,student.type)">
									<a v-if="student.phone" :href="'tel:'+student.phone">
										<img src="image/tel.svg" class="circle_img">
									</a>
								</li>

							</ul>
						</li>

						<li class="circle_li1">
							<a class="circle_title">老师 <div class="unread" v-if="anyUnread(teachers)"></div>
								<img :src="down(open.teacher)" class="circle_img" @click="open.teacher=!open.teacher">
							</a>
							<ul v-if="open.teacher">
								<li class="circle_li" v-for="teacher in teachers">
									<span v-text="teacher.name"></span>
									<div class="unread" v-if="teacher.unread"></div>
									<img v-if="teacher.accountId" src="image/message.svg" class="circle_img"
										@click="chat(teacher.id,-1)">
									<a v-if="teacher.phone" :href="'tel:'+teacher.phone">
										<img src="image/tel.svg" class="circle_img">
									</a>
								</li>

							</ul>
						</li>

						<li class="circle_li1">
							<a class="circle_title">个人中心
								<img :src="down(open.center)" class="circle_img" @click="open.center=!open.center">
							</a>
							<div v-if="open.center">
								<div class="tip" v-if="!phone0">
									你可以留下手机号码，便于{{isTeacher?'家长':'老师'}}与你电话联系
								</div>
								<div class="row">
									<div>手机号码</div>
									<div>
										<input v-model="phone" type="number" placeholder="">
									</div>
								</div>
								<div class="save" v-if="phone!=phone0">
									<button @click="submit">保存</button>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>

	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>

	<script src="/js/common.js"></script>

	<script>

		function store(person) {
			sessionStorage[isTeacher() ? 'hxt-teacher' : 'hxt-student'] = JSON.stringify(person);
		}

		var app = new Vue({
			el: '#vue-root',
			data: {
				classess: [],
				teachers: [],
				open: {
					center: false,
					teacher: false
				},
				isTeacher: isTeacher(),
				prefix: isTeacher() ? '/t' : '/s',
				phone: '',
				phone0: ''
			},
			created: function () {
				this.getData();
				this.phone0 = getPerson().phone || '';
				this.phone = this.phone0;
			},
			methods: {
				getData: function () {
					if (isTeacher()) {
						axios.get('/t/students').then(function (res) {
							var classess = res.data;
							classess.forEach(function (it) {
								it.open = false;
							});
							axios.get('/t/teachers').then(function (res) {
								var teachers = res.data;
								this.getUnread(teachers, classess);
								this.classess = classess;
								this.teachers = teachers;
							}.bind(this));
						}.bind(this));
					} else {
						axios.get('/s/teachers').then(function (res) {
							this.teachers = res.data;
							this.getUnread(this.teachers, []);
						}.bind(this));
					}
				},
				getUnread: function (teachers, classess) {
					axios.get(this.prefix + '/chat/unread').then(function (res) {
						var o = {};
						res.data.forEach(function (it) {
							o[it.fromPersonId + ',' + it.fromType] = '';
						});
						teachers.forEach(function (it) {
							var key = it.id + ',-1';
							if (key in o) Vue.set(it, 'unread', true);
						});
						classess.forEach(function (it) {
							it.students.forEach(function (it) {
								var key = it.studentId + ',' + it.type;
								if (key in o) Vue.set(it, 'unread', true);
							});
						});
					});
				},
				down: function (down) {
					return down ? 'image/down-point.svg' : 'image/left-point.svg';
				},
				chat: function (personId, type) {
					location.href = 'chat.html?personId=' + personId + '&type=' + type;
				},
				submit: function () {
					if (!/^1[3-9]\d{9}|6\d{7}$/.test(this.phone)) {
						alert('这似乎不是一个有效的手机号码');
						return;
					}
					var url = this.isTeacher ? '/t/teacher' : '/s/binding';
					axios.post(url, toFormParams({ phone: this.phone })).then(function (res) {
						this.phone0 = this.phone;
						var person = getPerson();
						person.phone = this.phone;
						store(person);
					}.bind(this));
				},
				anyUnread: function (people) {
					return people.some(function (it) {
						return it.unread;
					});
				}
			}

		});

	</script>

</body>

</html>